{% raw %}
<ul class="navbar-nav ml-auto">

  <!-- Nav Item - Alerts -->
  <li class="nav-item dropdown no-arrow mx-1" id="alert-danger" v-if="items.length > 0">
    <a class="nav-link dropdown-toggle" href="danger.html" id="alertsDropdown" role="button" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false" :title="items.length + ' issue(s) detected'">
      <i class="fas fa-bell fa-fw"></i>
      <!-- Counter - Alerts -->
      <span class="badge bg-danger badge-counter">{{ items.length }}</span>
    </a>
    <!-- Dropdown - Alerts -->
    <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="alertsDropdown">
      <h6 class="dropdown-header">
        Dangers detected
      </h6>
      <a class="dropdown-item d-flex align-items-center" href="danger.html" v-for="element in items.slice(0,5)">
        <div class="mr-3">
          <div class="icon-circle bg-danger">
            <i class="text-white font-weight-bold">{{ element.items.length }}</i>
          </div>
        </div>
        <div>
          <div class="small text-gray-500"></div>
          <span class="font-weight-bold">{{ element.group_title }}</span>
        </div>
      </a>
      <a class="dropdown-item text-center small text-gray-500" href="danger.html">Show All Alerts</a>
    </div>
  </li>

</ul>
{% endraw %}
